function（函式）是將程式碼包起來重複呼叫使用的object（物件），它使我們省下許多時間，為我們做“可重複利用”的事情。

例如我想在三段句子裡分別表示：

1. 1+2的值
2. 分別將兩串文字組在一起，如：Hello world!
3. 分別將文字與數字組在一起，如：My age is 37

那我可以這麼寫

  <p id="TEST"></p>
  <p id="TEST2"></p>
  <p id="TEST3"></p>
  <script>
    let TEST = sum(1, 2);
    let TEST2 = sum('Hello ', 'world!');
    let TEST3 = sum('My age is ', 37);

    function sum(a, b) {
      return a + b;
    }
    document.getElementById('TEST').innerHTML = TEST;  // 傳值到p#TEST
    document.getElementById('TEST2').innerHTML = TEST2; // 傳值到p#TEST2
    document.getElementById('TEST3').innerHTML = TEST3; // 傳值到p#TEST3
  </script>

執行出的內容分別是：
3
Hello world!
My age is 37

不需要重複的一直撰寫“回傳a+b”這個動作，這有點像是網頁設計中常用的“群組”概念，例如在illustrator中，可以將不同的元素群組起來，複製多個後去改其中固定的某些元素（文字、顏色或特效）。

在ES6中撰寫的方法使用了“箭頭函式運算式”，所以寫法會變成：

  <div id="TEST"></div>
  <div id="TEST2"></div>
  <div id="TEST3"></div>
  <script>
    const sum = (a, b) => a + b;

    let TEST = sum(1, 2);
    let TEST2 = sum('Hello ', 'world!');
    let TEST3 = sum('My age is ', 37);

    document.getElementById('TEST').innerHTML = TEST;
    document.getElementById('TEST2').innerHTML = TEST2;
    document.getElementById('TEST3').innerHTML = TEST3;
  </script>

要注意的是，const仍舊是變數，所以要寫在最上面喔，細節可以參考相關文章。

相關文章：

箭頭函式

Proper use of const for defining functions

[JavaScript] Javascript 中的 Hoisting(提升)：幫你留位子